<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab p{
            display: none;
        }
    </style>
</head>
<body>

    <div class="tab">
        <button style="color: red;">1</button>
        <button>2</button>
        <button>3</button>
        <p style="display: block;">1</p>
        <p>2</p>
        <p>3</p>
    </div>


    <div class="tab" id="a">
        <button style="color: red;">1</button>
        <button>2</button>
        <button>3</button>
        <p style="display: block;">1</p>
        <p>2</p>
        <p>3</p>
    </div>



    <script>

        // function tab() {
        //     const oTab = document.querySelector('.tab') ;
        //     const oBtns = oTab.querySelectorAll('button') ;
        //     const oPs = oTab.querySelectorAll('p') ;

        //     oBtns.forEach((v,i)=> {
        //        v.onclick = function() {
        //             // 清除所有的样式
        //             oBtns.forEach((v ,i) => {
        //                 v.style.color = 'black' ;
        //                 oPs[i].style.display = 'none'
        //             })
        //             // 显示当前
        //             v.style.color = 'red' ;
        //             oPs[i].style.display = 'block'
        //        }
        //     })
        // }

        // tab()







        function Tab(ele) {
            this.oTab = document.querySelector(ele) ;
            this.oBtns = this.oTab.querySelectorAll('button') ;
            this.oPs = this.oTab.querySelectorAll('p') ;

            this.init()
        }

        Tab.prototype.init = function() {
            this.oBtns.forEach((v,i)=> {
               v.onclick = () => {
                   console.log(this);
                    // 清除所有的样式
                    this.oBtns.forEach((v ,i) => {
                        v.style.color = 'black' ;
                        this.oPs[i].style.display = 'none'
                    })
                    // 显示当前
                    v.style.color = 'red' ;
                    this.oPs[i].style.display = 'block'
               }
            })
        }


        const tab = new Tab('.tab') ;

       

        const t2 = new Tab('#a') ;




    </script>
    
</body>
</html>